<template>
  <div class="empty-state">
    <div class="empty-icon">
      <el-icon :size="iconSize">
        <component :is="iconComponent" />
      </el-icon>
    </div>
    <div class="empty-title">{{ title }}</div>
    <div v-if="description" class="empty-description">{{ description }}</div>
    <div v-if="$slots.action" class="empty-action">
      <slot name="action"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { ElIcon } from 'element-plus';
import { 
  Picture, Document, FolderOpened, Search, 
  Collection, Star, Delete 
} from '@element-plus/icons-vue';

interface Props {
  type?: 'photo' | 'album' | 'folder' | 'search' | 'collection' | 'favorite' | 'trash';
  title?: string;
  description?: string;
  iconSize?: number;
}

const props = withDefaults(defineProps<Props>(), {
  type: 'photo',
  iconSize: 80
});

// 根据类型获取图标组件
const iconComponent = computed(() => {
  const iconMap = {
    photo: Picture,
    album: Collection,
    folder: FolderOpened,
    search: Search,
    collection: Collection,
    favorite: Star,
    trash: Delete,
    document: Document
  };
  
  return iconMap[props.type] || Document;
});

// 默认标题
const defaultTitle = computed(() => {
  const titleMap = {
    photo: '暂无照片',
    album: '暂无相册',
    folder: '文件夹为空',
    search: '未找到结果',
    collection: '暂无收藏',
    favorite: '暂无收藏',
    trash: '回收站为空',
    document: '暂无内容'
  };
  
  return titleMap[props.type] || '暂无内容';
});

// 默认描述
const defaultDescription = computed(() => {
  const descriptionMap = {
    photo: '点击导入按钮添加照片',
    album: '点击创建按钮添加相册',
    folder: '选择其他文件夹或导入照片',
    search: '尝试使用其他关键词搜索',
    collection: '点击心形图标收藏照片',
    favorite: '点击心形图标收藏照片',
    trash: '删除的照片将显示在这里',
    document: '暂无内容可显示'
  };
  
  return descriptionMap[props.type] || '';
});
</script>

<style scoped lang="scss">
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  
  .empty-icon {
    margin-bottom: 16px;
    color: var(--el-text-color-disabled);
  }
  
  .empty-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--el-text-color-primary);
    margin-bottom: 8px;
  }
  
  .empty-description {
    font-size: 14px;
    color: var(--el-text-color-secondary);
    margin-bottom: 20px;
    max-width: 400px;
  }
  
  .empty-action {
    margin-top: 8px;
  }
}
</style>